﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .head
        {
            background-color: #FFFFD700;
            width: auto;
            cursor: pointer;
            width: 700px;
            text-align: center;
        }
        .content
        {
            width: 700px;
        }
        .panel
        {
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid #00f0d0;
            background-color: #96E555;
            cursor: pointer;
        }
    </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $('#panel h5.head').toggle(function () {
            //                $('.content').slideUp(500);
            //            }, function () {
            //                $('.content').slideDown(500);
            //            });

            //            $('#panel h5.head').toggle(function () {
            //                $('.content').animate({ height: '0px', width: '0px', display: 'none' }, 500);
            //            }, function () {
            //                $('.content').animate({ display: 'block', height: 'auto', width: '700px' }, 500);
            //            });

            //            $('div.panel').click(function () {
            //                $(this).animate({ left: '+=300px' }, 3000)
            //                    .animate({ height: '+=200px' }, 3000);
            //            });

            $('.panel').click(function () {
                alert($(this).offset().left);
                alert($(this).position().left);
            });

            $('.panel').hover(function () {
                $(this).stop(true)
                    .animate({ width: '300px' }, Math.abs(300 - $(this).position().left) * 2)
                    .animate({ height: '600px' }, Math.abs(600 - $(this).position().top) * 2);
            }, function () {
                $(this).stop(true)
                    .animate({ height: '60' }, Math.abs(60 - $(this).position().top) * 2)
                    .animate({ width: '60' }, Math.abs(60 - $(this).position().left) * 2);
            });
        });
    </script>
</head>
<body>
    <div id="panel">
        <h5 class="head">
            什么是JQuery?</h5>
        <div class="content">
            对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
        </div>
        <h5 class="head">
            动画效果，实现了匀速</h5>
        <div class="panel">
        </div>
    </div>
</body>
</html>
